import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
    data(){
        return {
            search_form: {},//搜索表单
            
            tableData: [],//表格数据
            selectedRows: [],//已选中的多选行数据

            currentPage: 1,//当前页码
            pageSize: 10,//当前每页数量
            pageSizes: [10, 15, 20, 30, 50, 100], //可选分页数量
            pagerCount: 5,//分页最多按钮数量
            total: 100,//列表总条数

            dialog_title: "",//对话框标题 新增/编辑

            //样式配置
            size: "small",//表单控件尺寸
            border: true,//表格边框

            loading: false,//页面加载状态

            tHeadMap: {},//定义表头字段和名称映射，还有导出字段
            acceptType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",//可接受的文件上传的类型
            importTableData: [],//导入的表格数据(未验证数据有效性)
            importTip: "",//导入提示
        }
    },
    created(){
        
    },
    mounted(){
        
    },
    methods:{
        //表单搜索
        handleFormSearch(){
            //重置页码
            this.currentPage = 1
            //获取表格数据
            this.getTableData()
        },
        //搜索表单重置
        handleSearchFormReset(){
            //遍历字段，重新赋予空值
            for(var key in this.search_form){
                this.search_form[key] = ""
            }
        },

        //刷新表格数据
        handleRefreshList(){
            //获取表格数据
            this.getTableData()
        },
        //新增行
        handleAddRow(){
            //对话框标题
            this.dialog_title = "新增"
            //打开对话框
            this.$refs?.formDialog?.open("add")
            //数据初始化
            this.$refs?.formDialog?.initData()
        },
        //编辑行
        handleEditRow(e){
            //e => row || e => event
            //对话框标题
            this.dialog_title = "编辑"
            //打开对话框
            this.$refs?.formDialog?.open("edit")
            //数据初始化（区分行编辑还是顶部的编辑）
            const row = e.id? e:this.selectedRows[0]
            //对话框数据初始化
            this.$refs?.formDialog?.initData(row)
        },
        //导入事件
        async onImportFileChange(file, fileList){
            //重置导入数据
            this.importTableData = []
            try {
                //开启弹窗
                this.$refs.importDialog.open()
                //开启弹窗加载
                this.$refs.importDialog.openLoading()
                //把文件转换成JSON并保存
                var importTableData = await xlsxTojson(file.raw, {
                    Thead: true,//带表头
                    TheadConfig: this.tHeadMap,//表头自定义配置
                })
                //硬编码，移除特殊字段
                importTableData = importTableData.map(item=>{
                    delete item.createdAt
                    delete item.updatedAt
                    return item
                })
                //移除空数据
                this.importTableData = importTableData.filter(item=>{
                    return !this.$utils.isEmptyObject(item)
                })
                //隐藏弹窗加载
                this.$refs.importDialog.closeLoading()
            } catch (error) {
                console.log(error)
            }
        },
        //删除多行
        async handleDelRows(id){
            try {
                //参数准备（有传id表示单个删除，否则表示多选删除）
                //动态标题
                if(id){
                    var ids = [id]
                    var title = "确定删除此项?"
                }else{
                    //多选删除
                    var ids = this.selectedRows.map(row=>{
                        return row.id
                    })
                    var title = `确定删除选中的 ${ids.length} 项?`
                }
                //确认框
                await this.$confirm(title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                //处理删除事件
                this.handleDelete(ids)
            } catch (error) {
                console.log('error', error)
            }
        },

        //导出
        handleClickExport(){
            //只导出当前页数据，且不得为空
            if(this.tableData.length == 0){
                this.$message.error("当前数据为空!")
                return
            }
            //过滤表格，只保留展示字段
            const keys = Object.keys(this.tHeadMap)
            const tableData = this.tableData.map(row=>{
                //要返回的新行
                const _row = {}
                //循环添加要保留的字段
                keys.forEach(key=>{
                    _row[key] = row[key]
                })
                //返回新行
                return _row
            })
            //执行导出
            jsonToxlsx(tableData, this.tHeadMap, this.moduleInfo.moduleName)
        },

        //表格多选事件
        handleSelectionChange(selection){
            //保存已选中的行
            this.selectedRows = selection
        },
        //页码切换
        handleCurrentChange(e) {
            //保存当前页码
            this.currentPage = e
            //获取表格数据
            this.getTableData()
        },
        //每页数量切换
        handleSizeChange(e) {
            //保存每页数量
            this.pageSize = e
            //重置页码
            this.currentPage = 1
            //获取表格数据
            this.getTableData()
        },

        //处理表单提交事件
        handleSubmit(form){
            //执行提交请求
            this.requestSubmit(form)
        },
        //处理导入提交
        handleImportSubmit(tableData = []){
            //执行提交请求
            this.requestImportSubmit(tableData)
        },

        //获取表格数据
        async getTableData() {
            try {
                //开启加载状态
                this.loading = true
                //请求
                const result = await this.indexApi(this.queryParams)
                //关闭加载状态
                this.loading = false
                //处理返回
                if (result.code == 1) {
                    //保存表格数据
                    this.tableData = result.data.rows || []
                    this.total = result.data.total || 0
                }
            } catch (error) {
                console.log('error', error)
                //关闭加载状态
                this.loading = false
            }
        },
        //执行提交请求
        async requestSubmit(form){
            try {
                //开启加载状态
                this.$refs.formDialog.openLoading()
                //执行请求
                if(form.id){
                    //编辑
                    var result = await this.editApi(form)
                }else{
                    //新增
                    var result = await this.addApi(form)
                }
                //关闭加载状态
                this.$refs.formDialog.closeLoading()
                //处理返回
                if (result.code == 1) {
                    //关闭弹窗
                    this.$refs?.formDialog?.close()
                    //弹出成功提示
                    this.$message.success(result.msg)
                    //重新获取数据
                    this.getTableData()
                }else{
                    //弹出失败提示
                    this.$message.error(result.msg)
                }
            } catch (error) {
                console.log('error', error)
                //关闭加载状态
                this.$refs.formDialog.closeLoading()
            }
        },
        //处理删除事件
        async handleDelete(ids = []){
            try {
                //开启加载状态
                this.loading = true
                //请求
                const result = await this.delApi({ids})
                //关闭加载状态
                this.loading = false
                //处理返回
                if (result.code == 1) {
                    //弹出成功提示
                    this.$message.success(result.msg)
                    //重新获取数据
                    this.getTableData()
                }else{
                    //弹出失败提示
                    this.$message.error(result.msg)
                }
            } catch (error) {
                console.log('error', error)
                //关闭加载状态
                this.loading = false
            }
        },
        //更新字段
        async handleUpdateField(row, field){
            try {
                //开启加载状态
                this.loading = true
                //请求
                const result = await this.updateFieldApi({
                    id: row.id,
                    field: field,
                    value: row[field]
                })
                //关闭加载状态
                this.loading = false
                //处理返回
                if (result.code == 1) {
                    //弹出成功提示
                    this.$message.success(result.msg)
                    //重新获取数据
                    this.getTableData()
                }else{
                    //弹出失败提示
                    this.$message.error(result.msg)
                    //恢复原先的状态
                    row[field] = !row[field]
                }
            } catch (error) {
                console.log('error', error)
                //关闭加载状态
                this.loading = false
                //恢复原先的状态
                row[field] = !row[field]
            }
        },
        //执行导入提交请求
        async requestImportSubmit(tableData = []){
            try {
                //开启加载状态
                this.$refs.importDialog.openLoading()
                //执行请求
                const result = await this.importApi(tableData)
                //关闭加载状态
                this.$refs.importDialog.closeLoading()
                //处理返回
                if (result.code == 1) {
                    //关闭弹窗
                    this.$refs?.importDialog?.close()
                    //弹出成功提示
                    this.$message.success(`${result.msg}(共提交了${tableData.length}条数据，其中新增或更新了${result.data.updated}条数据，跳过了${result.data.skipped}条数据)`)
                    //重新获取数据
                    this.getTableData()
                }else{
                    //弹出失败提示
                    this.$message.error(result.msg)
                }
            } catch (error) {
                console.log('error', error)
                //关闭加载状态
                this.$refs.importDialog.closeLoading()
            }
        },
        
    },
    computed: {
        ...mapState(['menuOrigin', 'userInfo']),
        //查询参数
        queryParams(){
            return {
                filter: JSON.stringify(this.search_form),
                page: this.currentPage,
                pageSize: this.pageSize
            }
        },
        //模块信息
        moduleInfo(){
            //路径数组
            const pathArr = this.$route.path.split('/').filter(item=>{
                return item
            })
            //超出格式不兼容 /websites/index => websites
            if(pathArr.length > 2){
                return
            }
            //模块名称
            const moduleName = pathArr[0]
            return {
                add: `/api/${moduleName}/add`,
                edit: `/api/${moduleName}/edit`,
                import: `/api/${moduleName}/import`,
                del: `/api/${moduleName}/del`,
                moduleName: moduleName
            }
        },
        //是否展示新增按钮
        showAddBtn(){
            //超级管理员不受限制
            if(this.userInfo.isAdmin == 1){
                return true
            }
            return this.menuOrigin.find(item=>{
                return item.path == this.moduleInfo.add
            })
        },
        //是否展示编辑按钮
        showEditBtn(){
            //超级管理员不受限制
            if(this.userInfo.isAdmin == 1){
                return true
            }
            return this.menuOrigin.find(item=>{
                return item.path == this.moduleInfo.edit
            })
        },
        //是否展示导入按钮
        showImportBtn(){
            //超级管理员不受限制
            if(this.userInfo.isAdmin == 1){
                return true
            }
            return this.menuOrigin.find(item=>{
                return item.path == this.moduleInfo.import
            })
        },
        //是否展示删除按钮
        showDelBtn(){
            //超级管理员不受限制
            if(this.userInfo.isAdmin == 1){
                return true
            }
            return this.menuOrigin.find(item=>{
                return item.path == this.moduleInfo.del
            })
        },
        //展示的表格导入数据(要考虑异步验证)
        showImportTableData(){
            return this.importTableData.map(row=>{
                return {
                    ...row,
                    fail: false
                }
            })
        }
    }
}